<template>
    <div>
      <input placeholder="Please input" :type="type" ref="inputRef" @blur="isEmpty"/>
      <div v-if="errorMessage" class="remind">{{errorMessage}}</div>
    </div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
    props: {
      type: {
        type: String,
        default: 'text'
      }
    },
    emits: ['formEmpty'],
    setup(props, context) {
      const inputRef = ref(null)
      const errorMessage = ref('')
      // onMounted(() => {
      //   console.log(inputRef.value)
      // })
      const isEmpty = () => {
        if (inputRef.value.value === '') {
          errorMessage.value = '不能为空'
        } else {
          errorMessage.value = ''
        }
      }
      return {
        inputRef,
        isEmpty,
        errorMessage
      }
    }
})
</script>
<style scoped>
  input{
    width:200px;
    height: 25px;
    margin-bottom: 8px;
    border-radius: 10px;
  }
  .remind{
    font-size: 18px;
    color: red;
  }
</style>
